<template>
  <div class="padding_btn container">
    <i-swipeout v-for="info in list" v-if="list.length>0"
    :key="info.id" i-class="i-swipeout-demo-item" :operateWidth="100">
      <div slot="content">
        <UserItem :info='info'  :pageType="'contact'"></UserItem>
      </div>
      <div slot="button" class="i-swipeout-demo-button-group btn_group">
        <div class="i-swipeout-demo-button edit_btn" @click="editItem(info)">编辑</div>
        <div class="i-swipeout-demo-button del_btn" @click="delItem(info)">删除</div>
      </div>
    </i-swipeout>
    <p class="end_p" v-if="isEnd&&list.length>0">------ 我是有底线的  ------ </p>
         <Empty v-if="list.length==0&&!isLoading"></Empty>
    <div class="fixed_btn" @click.stop="goContact">新增联系人</div>

  </div>
</template>

<script>
import UserItem from "@/components/UserItem";
import api from "@/utils/api";
import Empty from "@/components/Empty";
export default {
  components: {
    UserItem,
    Empty
  },
  data() {
    return {
      isEnd: false,
      postData: {
        pageIndex: 1,
        pageSize: 10,
        id: "",
        status: ""
      },
      list: [],
      isLoading: false,
      isEnd: false
    };
  },
  onShow() {
    this.Refresh();
  },
  onReachBottom() {
    //执行上拉执行的功能
    this.loadMore();
  },
  async onPullDownRefresh() {
    // to doing..
    // 停止下拉刷新
    this.Refresh();
    wx.stopPullDownRefresh();
  },
  methods: {
    goContact() {
      this.$router.push("/pages/contact/detail/main");
    },
    editItem(data) {
      console.log("编辑");
      this.$router.push(
        "/pages/contact/detail/main?type=" + "edit&id=" + data.id
      );
    },
    delItem(data) {
      let option = {
        id: data.id,
        type: 0
      };
      api.customerContact
        .Status(option)
        .then(res => {
          console.log("删除", res);
          if (res && res.code == 0) {
            this.toastSuccess(res.msg);
            setTimeout(() => {
              this.Refresh();
            }, 500);
          } else {
            this.toastError(res.msg);
          }
        })
        .catch(err => {
          console.log("err", err);
          this.toastError("网络繁忙！");
        });
    },
    Refresh() {
      this.postData.pageIndex = 1;
      this.isEnd = false;
      this.getList();
    },
    loadMore() {
      if (this.isEnd) return;
      this.postData.pageIndex++;
      this.getList();
    },
    getList() {
      let option = this.postData;
      this.isLoading = true;
      console.log("参数", option);
      api.customerContact
        .List(option)
        .then(res => {
          this.isLoading = false;
          console.log("联系人列表", res);
          if (res && res.code == 0) {
            let { data, total } = res.data;
            if (this.postData.pageIndex == 1) {
              this.list = data;
            } else {
              this.list.push(...data);
            }
            if (this.postData.pageIndex * this.postData.pageSize >= total) {
              this.isEnd = true;
            }
          } else {
            this.toastError(res.msg);
          }
          console.log("联系人列表", this.list);
        })
        .catch(err => {
          console.log("err", err);
           this.isLoading = false;
            this.isEnd = true;
          this.toastError("网络繁忙");
        });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}
.edit_btn {
  color: #fff;
  background-color: #2d8cf0;
}

.del_btn {
  background-color: #f56c6c;
}

.btn_group {
  display: flex;
  height: 100%;
  line-height: 100%;
  vertical-align: middle;
  text-align: center;
}

.btn_group .i-swipeout-demo-button {
  color: #fff;
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
</style>
